<template>
	<view class="login-register">
		<view class="title">{{ title }}</view>
		<view class="login-content">
			<view class="account">
				<input class="input-style" type="number" maxlength="11" placeholder-class="placeholder-style"
					placeholder="手机号" v-model="account" :focus="accountFocus" @blur="accountLostFocus">
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="vertify">
				<input class="input-style-two" type="text" maxlength="8" placeholder-class="placeholder-style"
					placeholder="验证码" v-model="vertifyCode" :focus="vertifyCodeFocus" @blur="vertifyCodeLostFocus">
				<view class="right">
					<view class="left-line"></view>
					<view class="text-style-one">
						<view class="code-style">
							<view :class="`code ${disabled ? 'disabled' : ''}`" @click="getVilidCode()">
								{{ time }}{{ text }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="password">
				<input class="input-style" type="text" placeholder-class="placeholder-style" placeholder="昵称"
					v-model="name" :focus="nameFocus" @blur="nameLostFocus">
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="password">
				<input class="input-style" type="text" placeholder-class="placeholder-style" placeholder="登录密码"
					v-model="password" :password="isPassword_one" :focus="passwordFocus" @blur="passwordLostFocus">
				<image class="image" :src="img_one" mode="widthFix" @click="changeImg(1)"></image>
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="password">
				<input class="input-style-two" type="text" placeholder-class="placeholder-style" placeholder="确认密码"
					v-model="confirmPassword" :password="isPassword_two" :focus="confirmPasswordFocus"
					@blur="confirmPasswordLostFocus">
				<image class="image" :src="img_two" mode="widthFix" @click="changeImg(2)"></image>
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="password">
				<input class="input-style" type="text" placeholder-class="placeholder-style" placeholder="真实姓名"
					v-model="idCardName" :focus="idCardNameFocus" @blur="idCardNameLostFocus">
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="password">
				<input class="input-style" type="text" placeholder-class="placeholder-style" placeholder="身份证号"
					v-model="idCard" :focus="idCardFocus" @blur="idCardLostFocus" maxlength="18">
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="invite">
				<input class="input-style-two" type="text" maxlength="6" placeholder-class="placeholder-style"
					placeholder="邀请码" v-model="inviteCode" :focus="inviteCodeFocus" @blur="inviteCodeLostFocus">
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
		</view>
		<view class="login-button" @click="confirm">完成</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import IdentityCodeValid from '@/common/IdCardValid.js';
	import {
		register,
		sendSms
	} from '@/common/api.js';
	export default {
		data() {
			return {
				title: '注册新用户',

				/* 注册新用户 */
				account: '', // 登录账号
				accountFocus: false, // 登录账号状态
				vertifyCode: '', // 验证码
				vertifyCodeFocus: false, // 验证码状态
				name: '', // 用户昵称
				nameFocus: false, // 用户昵称状态
				password: '', // 登录密码
				passwordFocus: false, // 登录密码状态
				confirmPassword: '', // 确认登录密码
				confirmPasswordFocus: false, // 确认登录密码状态
				idCardName: '', // 真实姓名
				idCardNameFocus: false, // 真实姓名状态
				idCard: '', // 身份证号
				idCardFocus: false, // 身份证号状态
				inviteCode: '', // 邀请码
				inviteCodeFocus: false, // 邀请码状态

				/* 获取邀请码 */
				text: '发送验证码', // 获取验证码消息
				time: '', // 获取验证码倒计时
				disabled: false, // 判断是否已经点击

				/* 密码点击显示 */
				img_one: '/static/images/login/hide.png', // 密码显示
				img_two: '/static/images/login/hide.png', // 确认密码显示
				isPassword_one: true, // 是否显示密码
				isPassword_two: true, // 是否显示确认密码
			};
		},
		onLoad() {
			// this.inviteCode = option.invitecode;
		},
		onShow() {

		},
		methods: {

			/* 完成注册账号 */
			confirm() {
				const that = this;
				if (that.account === '') {
					Fn.Toast('手机号不能为空', 3, 1500);
					that.accountFocus = true;
					return;
				};
				if (that.vertifyCode === '') {
					Fn.Toast('请先获取验证码', 3, 1500);
					that.vertifyCodeFocus = true;
					return;
				};
				if (that.name === '') {
					Fn.Toast('昵称不能为空');
					that.nameFocus = true;
					return;
				};
				if (that.password === '') {
					Fn.Toast('登录密码不能为空', 3, 1500);
					that.passwordFocus = true;
					return;
				};
				if (that.confirmPassword === '') {
					Fn.Toast('确认登录密码不能为空', 3, 1500);
					that.confirmPasswordFocus = true;
					return;
				};
				if (that.confirmPassword != that.password) {
					Fn.Toast('两次密码不一样，请重新输入', 3, 1500);
					that.confirmPasswordFocus = true;
					return;
				};
				if (that.idCardName === '') {
					Fn.Toast('真实姓名不能为空', 3, 1500);
					that.idCardNameFocus = true;
					return;
				};
				if (that.idCard === '') {
					Fn.Toast('身份证号不能为空', 3, 1500);
					that.idCardFocus = true;
					return;
				};
				/* else if (!IdentityCodeValid(that.idCard)) {
					Fn.Toast('身份证有误，请重新输入', 3, 1500);
					that.idCardFocus = true;
					return;
				 }*/
				if (that.inviteCode === '') {
					Fn.Toast('邀请码不能为空', 3, 1500);
					that.inviteCodeFocus = true;
					return;
				};
				const params = {
					userName: that.name,
					userPhone: that.account,
					password: that.password,
					inviteCode: that.inviteCode,
					code: that.vertifyCode,
					cardID: that.idCard,
					truename: that.idCardName
				};
				uni.$u.throttle(() => {
					register(params).then((res) => {
						if (res.status === 1) {
							const result = res.data;
							Fn.Toast(res.msg, 3, 1500);
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500);
						} else {
							Fn.Toast(res.msg, 3, 1500);
						};
					});
				}, 1500);
			},

			/* 获取短信验证号 */
			async getVilidCode() {
				const that = this;
				if (that.disabled) {
					return;
				};
				if (that.account === '') {
					Fn.Toast('请输入手机号', 3, 1500);
					that.accountFocus = true;
					return;
				};
				const params = {
					phone: that.account,
					type: 1
				};
				await sendSms(params).then((res) => {
					if (res.status === 1) {
						const result = res;
						Fn.Toast('请注意查收验证码', 3, 1500);
						this.disabled = true;
						this.setInterValFunc();
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 验证码框 */
			setInterValFunc() {
				this.time = 60;
				this.text = 's后重新获取';
				this.setTime = setInterval(() => {
					if (this.time - 1 == 0) {
						this.time = '';
						this.text = '重新发送';
						this.disabled = false;
						clearInterval(this.setTime);
					} else {
						this.time--;
					}
				}, 1000);
			},

			/* 更改Img样式 */
			changeImg(option) {
				const show = '/static/images/login/show.png';
				const hide = '/static/images/login/hide.png';
				if (option == 1) {
					if (this.img_one == hide) {
						this.img_one = show;
						this.isPassword_one = false;
					} else {
						this.img_one = hide;
						this.isPassword_one = true;
					};
				} else {
					if (this.img_two == hide) {
						this.img_two = show;
						this.isPassword_two = false;
					} else {
						this.img_two = hide;
						this.isPassword_two = true;
					};
				};
			},

			/* 手机号失去焦点时 */
			accountLostFocus(event) {
				this.accountFocus = false;
			},

			/* 验证码失去焦点时 */
			vertifyCodeLostFocus(event) {
				this.vertifyCodeFocus = false;
			},

			/* 昵称失去焦点时 */
			nameLostFocus(event) {
				this.nameFocus = false;
			},

			/* 登录密码失去焦点时 */
			passwordLostFocus(event) {
				this.passwordFocus = false;
			},

			/* 确认登录密码失去焦点时 */
			confirmPasswordLostFocus(event) {
				this.confirmPasswordFocus = false;
			},

			/* 身份证失去焦点时 */
			idCardLostFocus(event) {
				this.idCardFocus = false;
			},
			
			/* 真实姓名失去焦点时 */
			idCardNameLostFocus() {
				this.idCardNameFocus = false;
			},

			/* 失去焦点时 */
			inviteCodeLostFocus(event) {
				this.inviteCodeFocus = false;
			},

			/* 跳转至重置密码 */
			navigatePassword() {
				uni.navigateTo({
					url: '/pages/login/register/setPassword/setPassword',
				});
			},
		}
	}
</script>

<style lang="scss">
	.login-register {
		padding: 0 34px;
		font-family: PingFang_Medium;

		.title {
			padding: 10vh 0;
			font-size: 46rpx;
			// font-weight: 600;
			font-family: PingFang_Bold;
		}

		.login-content {

			.input-style {
				width: 50vw;
				font-size: 30rpx;
				// font-weight: 600;
				line-height: 60rpx;
				font-family: PingFang_Bold;
			}

			.input-style-two {
				width: 45vw;
				font-size: 30rpx;
				// font-weight: 600;
				line-height: 60rpx;
				font-family: PingFang_Bold;
			}

			.placeholder-style {
				color: #CDCDCD;
				// line-height: 60rpx;
			}

			.content-title {
				margin-right: 40rpx;
				color: #000000;
				font-size: 34rpx;
				// font-weight: 600;
				height: 60rpx;
				font-family: PingFang_Bold;
			}

			.account {
				display: flex;
				align-items: center;
			}

			.vertify {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					.left-line {
						height: 50rpx;
						border-left: 2px solid #CDCDCD;
					}

					.text-style-one {
						// display: flex;
						// align-items: center;
						cursor: pointer;

						.title {
							color: #E6D19F;
							font-size: 32rpx;
							// font-weight: 600;
							width: 23vw;
						}

						.code-style {
							display: flex;
							align-items: center;

							.input-style {
								margin-top: 10rpx;
								width: 40vw;
								color: #4B2113;
								// font-weight: 600;
								font-family: PingFang_Bold;
							}

							.code {
								margin-left: 20rpx;
								// color: #FDAC00;
								font-size: 28rpx;
								// font-weight: 600;
								font-family: PingFang_Bold;
							}

							.disabled {
								pointer-events: none;
								cursor: default;
								opacity: 0.6;
							}
						}

						.input-style-one {
							width: 100%;
							margin-top: 10rpx;
							color: #4B2113;
							// font-weight: 600;
						}

						.placeholder-style {
							color: #4B2113;
							font-size: 30rpx;
							// font-weight: 600;
						}
					}
				}
			}

			.invite {
				margin-top: 40rpx;
			}

			.image {
				width: 5vw;
				height: 5vw;
				margin-right: 20rpx;
				cursor: pointer;
			}

			.password {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.login-button {
			background-color: #000000;
			margin: 5vh 0;
			text-align: center;
			color: #FFFFFF;
			font-size: 34rpx;
			// font-weight: 600;
			border-radius: 5px;
			line-height: 80rpx;
			box-shadow: 0px 2px 20px #dedede;
			// cursor: pointer;
			font-family: PingFang_Bold;
		}
	}
</style>
